<template>
  <div class="app-container">
    <div class="headerB">
      <HeaderCom></HeaderCom>
    </div>
    <div class="main">
      <div class="left">
        <NavCom></NavCom>
      </div>
      <div class="right">
        <MainCom></MainCom>
      </div>
    </div>
    <div class="footerB">
      <FooterCom></FooterCom>
    </div>
    <CommEntsss></CommEntsss>
  </div>
</template>
<script>
import HeaderCom from './components/HeaderCom.vue'
import NavCom from './components/NavCom.vue'
import MainCom from './components/MainCom.vue'
import FooterCom from './components/FooterCom.vue'
export default {
  components: {
    HeaderCom,
    NavCom,
    MainCom,
    FooterCom,
  },
  data () {
    return {
    }
  },
  created () {
  },
  computed: {
  },
  methods: {
  }
}
</script>
<style lang='less'  scoped>
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  .headerB {
    height: 200px;
  }
  .footerB {
    height: 200px;
    background-color: skyblue;
  }
  .main {
    flex: 1;
    display: flex;
    .left {
      width: 200px;
      background-color: pink;
    }
    .right {
      flex: 1;
      background-color: yellowgreen;
    }
  }
}
</style>
